<template>
  <div>
    <v-chart class="chart" ref="chart" :option="option" autoresize />
  </div>
</template>

<script>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent, ToolboxComponent } from 'echarts/components'
import VChart from 'vue-echarts'

import { ecExport } from '@/utils'

use([CanvasRenderer, PieChart, TitleComponent, TooltipComponent, LegendComponent, ToolboxComponent])

export default {
  name: 'pieChart',
  components: {
    VChart
  },
  props: {
    chartData: {
      type: Array,
      default: () => [
        { value: 335, name: 'Direct' },
        { value: 310, name: 'Email' },
        { value: 234, name: 'Ad Networks' },
        { value: 135, name: 'Video Ads' },
        { value: 1548, name: 'Search Engines' }
      ]
    },
    title: {
      type: String,
      default: '产品销量'
    },
    titleShow: {
      type: Boolean,
      default: true
    },
    legendShow: {
      type: Boolean,
      default: true
    },
    toolboxShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  computed: {
    legendData() {
      return this.chartData.map(item => item.name)
    },
    option() {
      return {
        toolbox: {
          show: this.toolboxShow,
          feature: {
            // dataZoom: {
            //   yAxisIndex: 'none'
            // },
            // dataView: { readOnly: false },
            // magicType: { type: ['line', 'bar'] },
            // restore: {},
            saveAsImage: {}
          }
        },
        title: {
          show: this.titleShow,
          text: this.title,
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          show: this.legendShow,
          orient: 'vertical',
          left: 'left',
          data: this.legendData
        },
        series: [
          {
            name: this.title,
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: this.chartData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  },

  methods: {
    _ecExport(title = '') {
      ecExport(this.$refs.chart, title)
    }
  }
}
</script>

<style lang="scss" scoped>
.chart {
  height: 100%;
  width: 100%;
}
</style>